<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-user"></i>基本信息
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          毕业设计
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box" v-if="!this.$common.status.student">
        <el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm"
                 v-show="!this.status.isEdit&&!this.status.isUpload"
                 label-width="100px" class="searchBox">
          <el-form-item label="学号" prop="id" class="inputForm">
            <el-input v-model="ruleForm.id"></el-input>
          </el-form-item>
          <el-form-item class="searchButton">
            <el-button type="primary" icon="el-icon-search" v-show="this.status.search" @click="submitForm('ruleForm')"
                       circle></el-button>
            <el-button icon="el-icon-refresh-right" @click="resetForm('ruleForm')" circle></el-button>
          </el-form-item>
          <el-button icon="el-icon-plus" @click="addDesignInfo" v-show="!this.status.ifEdit&&this.status.add"
                     circle></el-button>
        </el-form>
      </div>
      <div class="editButton" v-show="!this.status.isEdit&&this.status.ifEdit&&!this.status.isUpload">
        <el-button type="primary" icon="el-icon-edit" @click="editInfo"
                   v-show="this.status.update"
                   circle></el-button>
        <el-tooltip content="上传">
          <el-button type="primary" icon="el-icon-upload" @click="uploadFile"
                     v-show="this.status.update"
                     circle></el-button>
        </el-tooltip>
        <el-button type="danger" icon="el-icon-delete" @click="deleteInfo"
                   v-show="this.status.delete"
                   circle></el-button>
      </div>

      <div v-show="this.status.hasFoundSingle&&!this.status.isEdit&&!this.status.isUpload">
        <transition name="el-fade-in-linear">
          <el-card class="singleInfo-card">
            <table border="0" height="300px" class="singleInfo">
              <tr>
                <td><span class="singleInfo-key">姓名：</span></td>
                <td>{{ designInfo[0].graName }}</td>
                <td><span class="singleInfo-key">学号：</span></td>
                <td>{{ designInfo[0].graId }}</td>
              </tr>
              <tr>
                <td><span class="singleInfo-key">导师：</span></td>
                <td>{{ designInfo[0].mentor }}</td>
                <td><span class="singleInfo-key">答辩成绩：</span></td>
                <td>{{ designInfo[0].grade }}</td>
              </tr>
              <tr>
                <td><span class="singleInfo-key">题目：</span></td>
                <td>{{ designInfo[0].title }}</td>
                <td>
                  <span class="singleInfo-key">任务书：</span>
                </td>
                <td>
                  <el-link :href=this.linkList.taskLink target="_blank" download="任务书" v-show="designInfo[0].taskLink">
                    {{ designInfo[0].graName }}任务书.doc
                  </el-link>
                  <span v-if="!designInfo[0].taskLink">未上传文件</span>
                </td>
              </tr>
              <tr>
                <td><span class="singleInfo-key">开题报告：</span></td>
                <td>
                  <el-link :href=this.linkList.openReportLink target="_blank" download="开题报告"
                           v-show="designInfo[0].openReportLink">
                    {{ designInfo[0].graName }}开题报告.doc
                  </el-link>
                  <span v-if="!designInfo[0].openReportLink">未上传文件</span></td>
                <td><span class="singleInfo-key">开题报告评语：</span></td>
                <td>{{ designInfo[0].openReportReview }}</td>
              </tr>
              <tr>
                <td><span class="singleInfo-key">中期报告：</span></td>
                <td>
                  <el-link :href=this.linkList.interimReportLink target="_blank" download="中期报告"
                           v-show="designInfo[0].interimReportLink">
                    {{ designInfo[0].graName }}中期报告.doc
                  </el-link>
                  <span v-if="!designInfo[0].interimReportLink">未上传文件</span></td>
                <td><span class="singleInfo-key">指导：</span></td>
                <td>{{ designInfo[0].introduction }}</td>
              </tr>
              <tr>
                <td><span class="singleInfo-key">论文：</span></td>
                <td>
                  <el-link :href=this.linkList.lastReportLink target="_blank" download="答辩论文"
                           v-show="designInfo[0].lastReportLink">
                    {{ designInfo[0].graName }}论文.doc
                  </el-link>
                  <span v-if="!designInfo[0].lastReportLink">未上传文件</span></td>
                <td><span class="singleInfo-key">论文评语：</span></td>
                <td>{{ designInfo[0].lastReview }}</td>
              </tr>
            </table>
          </el-card>
        </transition>
      </div>
      <div v-show="this.status.isEdit">
        <transition name="el-fade-in-linear">
          <el-card class="singleInfo-card">
            <el-form :inline="true" :model="designInfoTemp" :rules="rules"
                     ref="designInfoTemp"
                     label-width="100px"
                     class="editForm">
              <el-form-item class="checkButton">
                <el-button type="success" icon="el-icon-check" @click.native="postInfo"
                           circle></el-button>
                <el-button type="danger" icon="el-icon-close" @click.native="cancelPost"
                           circle></el-button>
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="学号" prop="graId">
                    <el-input v-model="designInfoTemp.graId" class="inputForm"
                              :disabled="!this.status.isAdd"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="姓名" prop="name">
                    <el-input v-model="designInfoTemp.graName" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="导师" prop="mentor">
                    <el-input v-model="designInfoTemp.mentor" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="答辩成绩" prop="grade">
                    <el-input v-model="designInfoTemp.grade" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="题目" prop="title">
                    <el-input v-model="designInfoTemp.title" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="指导" prop="introduction">
                    <el-input v-model="designInfoTemp.introduction" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="开题报告评语" prop="openReportReview">
                    <el-input v-model="designInfoTemp.openReportReview" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="论文评语" prop="lastReview">
                    <el-input v-model="designInfoTemp.lastReview" class="inputForm"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </transition>
      </div>
      <div v-show="this.status.isUpload">
        <transition name="el-fade-in-linear">
          <el-card class="singleInfo-card">
            <el-form :inline="true" :model="designInfoTemp" :rules="rules"
                     ref="designInfoTemp"
                     label-width="100px"
                     class="editForm">
              <el-form-item class="checkButton">
                <el-button type="success" icon="el-icon-check" @click.native="uploadClose"
                           circle></el-button>
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-card shadow="hover" class="singleUpload">
                    <el-upload
                        class="upload-demo"
                        :multiple='false'
                        action="http://localhost:9926/file/upload"
                        :limit="1"
                        drag
                        :file-list="fileList[0]"
                        :on-exceed="handleExceed"
                        :on-success="onSuccessTask">
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>任务书</div>
                    </el-upload>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card shadow="hover" class="singleUpload">
                    <el-upload
                        ref="upload"
                        class="upload-demo"
                        :multiple='false'
                        action="http://localhost:9926/file/upload"
                        :limit="1"
                        drag
                        :file-list="fileList[1]"
                        :on-exceed="handleExceed"
                        :on-success="onSuccessOpenReport">
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>开题报告</div>
                    </el-upload>
                  </el-card>

                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-card shadow="hover" class="singleUpload">
                    <el-upload
                        ref="upload"
                        class="upload-demo"
                        :multiple='false'
                        action="http://localhost:9926/file/upload"
                        :limit="1"
                        drag
                        :file-list="fileList[2]"
                        :on-exceed="handleExceed"
                        :on-success="onSuccessInterimReport">
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>中期报告</div>
                    </el-upload>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card shadow="hover" class="singleUpload">
                    <el-upload
                        ref="upload"
                        class="upload-demo"
                        :multiple='false'
                        action="http://localhost:9926/file/upload"
                        :limit="1"
                        drag
                        :file-list="fileList[3]"
                        :on-exceed="handleExceed"
                        :on-success="onSuccessLastReport">
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>答辩论文</div>
                    </el-upload>
                  </el-card>
                </el-col>
              </el-row>
            </el-form>

          </el-card>
        </transition>
      </div>

    </div>
  </div>
</template>

<script>
import bus from "../components/bus";
import Vue from "vue";

export default {
  name: "GraDesign",
  data() {
    return {
      ruleForm: {
        id: ''
      },
      rules: {
        id: [
          {required: true, message: '请输入学号', trigger: 'blur'},
          {min: 10, max: 10, message: '长度为10 个字符', trigger: 'change'}
        ]
      },
      linkList: {
        taskLink: null,
        openReportLink: null,
        interimReportLink: null,
        lastReportLink: null
      },
      fileList: [
        [{}],
        [{}],
        [{}],
        [{}]
      ],

      designInfo: [{
        graId: null,
        graName: null,
        grade: null,
        interimReportLink: null,
        introduction: null,
        lastReportLink: null,
        lastReview: null,
        mentor: null,
        openReportLink: null,
        openReportReview: null,
        taskLink: null,
        title: null,
      }],
      designInfoTemp: {},
      status: {
        hasFoundSingle: false,
        hasFoundMany: false,
        isEdit: false,
        ifEdit: false,
        add: false,
        search: false,
        update: false,
        delete: false,
        loading: true,
        isUpload: false,
        isAdd: false
      }
    }
  },
  created() {
    if (this.$store.state.userInfo.roles === 'student') {

      this.$set(this.$common.status, 'student', true)
    }
    for (let permission of this.$store.state.userInfo.permission) {
      this.$set(this.status, permission, true)
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this
          // alert('submit!');
          this.$axios.get('/design/' + this.ruleForm.id, {
            headers: {
              "Authorization": localStorage.getItem("token")
            }
          }).then(res => {
            _this.$set(_this.designInfo, 0, res.data.data)
            this.$set(this.status, "hasFoundSingle", true)
            this.$set(this.status, "ifEdit", true)
            let baseURL = "http://localhost:9926"
            if (_this.designInfo[0].taskLink !== null) {
              _this.linkList.taskLink = baseURL + "/file/" + _this.designInfo[0].taskLink
              _this.$set(_this.fileList[0][0], 'name', _this.designInfo[0].taskLink)
            }
            if (_this.designInfo[0].openReportLink !== null) {
              _this.linkList.openReportLink = baseURL + "/file/" + _this.designInfo[0].openReportLink
              _this.$set(_this.fileList[1][0], 'name', _this.designInfo[0].openReportLink)
            }
            if (_this.designInfo[0].interimReportLink !== null) {
              _this.linkList.interimReportLink = baseURL + "/file/" + _this.designInfo[0].interimReportLink
              _this.$set(_this.fileList[2][0], 'name', _this.designInfo[0].interimReportLink)
            }
            if (_this.designInfo[0].lastReportLink !== null) {
              _this.linkList.lastReportLink = baseURL + "/file/" + _this.designInfo[0].lastReportLink
              _this.$set(_this.fileList[3][0], 'name', _this.designInfo[0].lastReportLink)
            }
          }).catch(err => {
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$set(this.ruleForm, "id", "");
      this.$common.resetObject(this.designInfo[0])
      this.$set(this.status, "ifEdit", false)
      this.$set(this.status, "hasFoundSingle", false)
      this.$set(this.status, "hasFoundMany", false)
    },
    editInfo() {
      this.$common.objectValueAtoB(this.designInfo[0], this.designInfoTemp)
      this.$set(this.status, "isEdit", true)
    },
    postInfo() {
      const _this = this
      if (!this.$common.isObjectValueEqual(this.designInfoTemp, this.designInfo[0])) {
        this.$confirm('确认保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (_this.status.isAdd) {
            this.$axios.post('/design/save', _this.designInfoTemp, {
              headers: {
                "Authorization": localStorage.getItem("token")
              }
            }).then(res => {
              _this.$message.success("添加成功")
              this.$set(this.status, "isEdit", false)
              _this.$set(_this.status, 'isAdd', false)
            }).catch(err => {
              console.log(err);
            });
          } else {
            this.$axios.post('/design/update', _this.designInfoTemp, {
              headers: {
                "Authorization": localStorage.getItem("token")
              }
            }).then(res => {
              this.$common.objectValueAtoB(_this.designInfoTemp, _this.designInfo[0]);
              _this.$message.success("修改成功")
              this.$set(this.status, "isEdit", false)
            }).catch(err => {
              console.log(err);
            });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作'
          });
        });
      }
    },
    deleteInfo() {
      const _this = this
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        _this.$axios.delete('design/' + _this.designInfo[0].graId, {
          headers: {
            "Authorization": localStorage.getItem("token")
          }
        }).then(res => {
        });
        this.$set(this.status, "ifEdit", false)
        this.$set(this.status, "hasFoundSingle", false)
        this.$set(this.status, "hasFoundMany", false)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消操作'
        });
      });

    },
    cancelPost() {
      this.$confirm('是否离开编辑?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.designInfoTemp = {}
        this.$set(this.status, "isEdit", false)
        this.$set(this.status, "isAdd", false)
        this.$message({
          type: 'error',
          message: '未修改!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '继续编辑'
        });
      });
    },
    addDesignInfo() {
      this.$common.objectValueAtoB(this.designInfo[0], this.designInfoTemp)
      this.$set(this.status, "isEdit", true)
      this.$set(this.status, "ifEdit", false)
      this.$set(this.status, "hasFoundSingle", false)
      this.$set(this.status, "hasFoundMany", false)
      this.$set(this.status, "isAdd", true)
    },
    // 上传文件个数超过定义的数量
    handleExceed(files, fileList) {
      this.$message.warning('当前限制选择 1 个文件，请删除后继续上传');
    },
    onSuccessTask(response) {
      const _this = this
      this.$set(this.fileList[0][0], 'name', response.data)
      this.$axios.get('/file/delete/' + this.designInfoTemp.taskLink, {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      })
      _this.$set(this.designInfoTemp, 'taskLink', response.data)
      let baseURL = "http://localhost:9926"
      _this.linkList.taskLink = baseURL + "/file/" + _this.designInfoTemp.taskLink
      _this.$axios.post('/design/update', _this.designInfoTemp, {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then(res => {
        _this.$common.objectValueAtoB(_this.designInfoTemp, _this.designInfo[0])
      })

    },
    uploadFile() {
      this.$set(this.status, 'isUpload', true)
      this.$common.objectValueAtoB(this.designInfo[0], this.designInfoTemp)
    },
    onSuccessOpenReport(response) {
      const _this = this
      this.$set(this.fileList[1][0], 'name', response.data)
      this.$axios.get('/file/delete/' + this.designInfoTemp.openReportLink, {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      })
      _this.$set(this.designInfoTemp, 'openReportLink', response.data)
      let baseURL = "http://localhost:9926"
      _this.linkList.openReportLink = baseURL + "/file/" + _this.designInfoTemp.openReportLink
      _this.$axios.post('/design/update', _this.designInfoTemp, {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then(res => {
        _this.$common.objectValueAtoB(_this.designInfoTemp, _this.designInfo[0])
      })
    },
    onSuccessInterimReport(response) {
      const _this = this
      this.$set(this.fileList[2][0], 'name', response.data)
      this.$axios.get('/file/delete/' + this.designInfoTemp.interimReportLink, {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      })
      _this.$set(this.designInfoTemp, 'interimReportLink', response.data)
      let baseURL = "http://localhost:9926"
      _this.linkList.interimReportLink = baseURL + "/file/" + _this.designInfoTemp.interimReportLink
      _this.$axios.post('/design/update', _this.designInfoTemp, {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then(res => {
        _this.$common.objectValueAtoB(_this.designInfoTemp, _this.designInfo[0])
      })
    },
    onSuccessLastReport(response) {
      const _this = this
      this.$set(this.fileList[3][0], 'name', response.data)
      this.$axios.get('/file/delete/' + this.designInfoTemp.lastReportLink, {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      })
      _this.$set(this.designInfoTemp, 'lastReportLink', response.data)
      let baseURL = "http://localhost:9926"
      _this.linkList.lastReportLink = baseURL + "/file/" + _this.designInfoTemp.lastReportLink
      _this.$axios.post('/design/update', _this.designInfoTemp, {
        headers: {
          "Authorization": localStorage.getItem("token")
        }
      }).then(res => {
        _this.$common.objectValueAtoB(_this.designInfoTemp, _this.designInfo[0])
      })
    },
    uploadClose() {
      this.$set(this.status, 'isUpload', false)
    }
  }
}
</script>

<style scoped>
</style>